 

<script lang="jsx">
import CrudTableColumn from "../CrudTableColumn/index.js";

export default {
  name: "CrudTable",
  components: {
    CrudTableColumn,
  },
//   inject: ["crud"],
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    on: {
      type: Object,
      default: () => ({}),
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      emit: {},
      defaultProps: {
        stripe: true,
        size: "mini",
      },
    };
  },
  computed: {
    combinedProps() {
      return Object.assign({}, this.defaultProps, this.$attrs);
    },
    combinedEvents() {
      return Object.assign(
        {},
        {
          "selection-change": this.onSelectionChange,
          "sort-change": this.onSortChange,
          "row-contextmenu": this.onRowContextMenu,
        },
        this.emit,
        this.on
      );
    },
  },
  mounted() {
    this.bindEmits();
    this.$nextTick(() => {
      this.bindMethods(); // 确保 $refs.table 已加载
    });
  },
  methods: {
    bindEmits() {
      const emits = [
        "select",
        "select-all",
        "cell-mouse-enter",
        "cell-mouse-leave",
        "cell-click",
        "cell-dblclick",
        "row-click",
        "row-contextmenu",
        "row-dblclick",
        "header-click",
        "header-contextmenu",
        "filter-change",
        "current-change",
        "header-dragend",
        "expand-change",
      ];

      emits.forEach((name) => {
        this.emit[name] = (...args) => {
          this.$emit(name, ...args);
        };
      });
    },

    bindMethods() {
      const methods = [
        "clearSelection",
        "toggleRowSelection",
        "toggleAllSelection",
        "toggleRowExpansion",
        "setCurrentRow",
        "clearSort",
        "clearFilter",
        "doLayout",
        "sort",
      ];

      methods.forEach((n) => {
        if (this.$refs["table"] && this.$refs["table"][n]) {
          this[n] = this.$refs["table"][n];
        }
      });
    },
    onSelectionChange(selection) {
      this.$emit("selection-change", selection);
    },
    onSortChange({ prop, order }) {
      this.$emit("sort-change", { prop, order });
    },
    onRowContextMenu(row, column, event) {
      this.$emit("row-contextmenu", row, column, event);
    },
    onRowAction(action, scope) {
      this.$emit("row-action", action, scope);
      this.$emit(`row-${action}`, scope);
    },
  },
  render() {
    return (
      <el-table
        data={this.data}
        class="crud-table"
        ref="table"
        {...{
          props: this.combinedProps,
          on: this.combinedEvents,
        }}
      >
        {this.columns.map((column) => {
          return !column[`v-hasPermi`] ||
            !column[`v-hasPermi`].length ||
            this.$auth.hasPermiOr(column[`v-hasPermi`] || []) ? (
            <crud-table-column
              column={column}
              onAction={this.onRowAction}
            />
          ) : null;
        })}
        {this.$slots.default} {/* 继承外层插槽 */}
      </el-table>
    );
  },
};
</script>

<style scoped lang="scss">
.crud-table {
  &::v-deep {
    .el-table__body-wrapper {
      .el-table__cell {
        .cell:empty::after {
          content: '/';
          color: #c0c4cc;
        }
      }
    }
  }
}
</style>
